<template>
	<view>
		<fui-loading :isFixed="true" :isMask="true" v-if="loadingShow"></fui-loading>
		<view class="box" v-else>
			<fui-sticky>
				<view style="width: 100vw;background-color: #fff;">
					<fui-nav-bar zIndex="1000" title="文章详情" @leftClick="leftClick" style="padding-right: 32rpx;z-index: 999;">
						<fui-icon name="arrowleft"></fui-icon>
						<template v-slot:right>
							<view style="color: orangered;" v-if="time>0">
								{{time}}
							</view>
							<!-- <fui-icon @click="leftClick" v-else name="close" size="45"></fui-icon> -->
						</template>
					</fui-nav-bar>
				</view>
			</fui-sticky>
			<view class="title">
				{{detailData?.title}}
			</view>

			<view class="userInfo">
				<view class="avatar">
					<view class="">
						<fui-avatar :src="detailData?.user_avatar"></fui-avatar>
					</view>

					<view class="user_text">
						<view class="user_name">
							<view>{{detailData?.user_nickname}}</view>
						</view>
						<view class="user_value">
							<text>{{getDateDiff(detailData?.publish_date)}}</text>
							<text style="margin-left: 30rpx;">已有{{detailData?.view_count}}人阅读</text>
						</view>
					</view>
				</view>
			</view>


			<fui-notice-bar style="padding: 32rpx;z-index: 999;" :content="content" :speed="80" scrollable>
				<view class="fui-icon__box">
					<fui-icon name="notice" :size="36" color="#FF2B2B"></fui-icon>
				</view>
			</fui-notice-bar>
			<view>
				<!-- #ifdef H5 -->
				<view class="text">
					<text v-html="getHref(detailData?.content)"></text>
				</view>
				<!-- #endif -->
				<!-- #ifdef APP -->
				<view class="text">
					<text selectable="true">{{detailData?.content}}</text>
				</view>
				<!-- #endif -->
				<view class="images" v-for="(item,index) in detailData?.articles_img" :key="index">
					<image mode="widthFix" class="imagesOne" @click="previewImage(index)" :src="item"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { getHref, parseCode, getDateDiff } from "@/utils/index.js"
	import { LoginStore } from "@/store/modules/login.js";
	const api = uniCloud.importObject('qc-article', {
		customUI: true // 取消自动展示的交互提示界面
	})
	const marketingApi = uniCloud.importObject('qc-marketing', { customUI: true })
	import { ref, reactive, computed } from 'vue'
	const hasLogin = computed(() => (LoginStore().hasLogin))
	const userInfo = computed(() => (LoginStore().userInfo))
	import { onLoad, onBackPress, onUnload } from "@dcloudio/uni-app";
	const detailData = ref(null)
	const time = ref(10)
	const loadingShow = ref(true)
	var timer = setInterval(async () => {
		if(hongbao.value){
			time.value--
			if (time.value == 0) {
				const res = await marketingApi.getBongbao({ _id: id.value, user_id: userInfo.value._id })
				uni.$fui.toast(res.errMsg)
			}else if(time.value<0){
				clearInterval(timer);
			}
		}
	}, 1000)
	onUnload(() => {
		clearInterval(timer);
	})
	const id = ref()
	const hongbao = ref()
	onLoad(async (e) => {
		let item = JSON.parse(e.item)
		id.value = item._id
		hongbao.value = item.hongbao
		const { data } = await api.getAdDetails(item)
		detailData.value = data
		detailData.value.view_count++
		let params = {}
		if (hasLogin.value) {
			params = { user_id: userInfo?.value?._id }
		}
		await api.setViewCount({ _id: item._id, publish_type: item.publish_type, ...params })
		loadingShow.value = false
		uni.$emit("resetUpScroll", true)
	})
	let content = '所有文章由用户发布，请用户自行辨别，谨防色情、赌博、诈骗'
	//图片预览
	const previewImage = (index) => {
		uni.previewImage({
			current: index, // 当前显示图片的索引值
			urls: detailData.value.articles_img, // 需要预览的图片列表，photoList要求必须是数组
			longPressActions: {
				itemList: ['保存图片', '识别二维码'],
				success: function(data) {
					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					if (data.tapIndex == 0) {
						plus.nativeUI.closePreviewImage();
						//保存到相册
						uni.saveImageToPhotosAlbum({
							filePath: detailData.value.articles_img[index],
							success: function() {
								uni.showToast({
									title: '成功保存到系统相册中',
									icon: 'none',
									duration: 2000
								});
							}
						});
					} else {
						parseCode(detailData.value.articles_img[index])
					}
				},
				fail: function(err) {

				}
			}
		})
	}
	function leftClick() {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.box {
		min-height: 100vh;
		padding-bottom: 50rpx;
		background-color: #fff;
	}

	.images {
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding-bottom: 60rpx;
	}

	.imagesOne {
		margin-top: 20rpx;
		width: 92vw;
	}

	.imageitem {
		width: 32%;
	}

	.text {
		color: var(--fui-color-subtitle);
		padding: 32rpx;
		background-color: #fff;
	}

	.bottom {
		z-index: 999;
		font-size: 24rpx;
		width: 100%;
		height: 100rpx;
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-around;
		bottom: 0;
		background-color: var(--fui-bg-color);
	}

	.avatar {
		display: flex;
	}


	.button {
		padding: 10rpx 30rpx;
		color: #fff;
		border-radius: 40rpx;
		background-color: var(--fui-color-primary);
	}

	.user_text {
		width: 50vw;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-left: 20rpx;
	}

	.user_value {
		color: var(--fui-color-subtitle);
		font-size: 20rpx;
	}

	.user_name {
		display: flex;
		justify-content: space-between;
		align-items: center;
		vertical-align: middle;
	}

	.level {
		display: flex;
		padding: 2rpx 20rpx 2rpx 0;
		border-radius: 10rpx;
		justify-content: space-between;
		align-items: center;
		vertical-align: middle;
		font-size: 22rpx;
		background-color: #000;
		color: #febf40;

		image {
			margin-top: 5rpx;
		}
	}

	.title {
		background-color: var(--fui-bg-color);
		font-size: 36rpx;
		font-weight: bold;
		word-break: break-all;
		padding: 32rpx 32rpx 10rpx 32rpx;
	}

	.userInfo {
		background-color: var(--fui-bg-color);
		display: flex;
		align-items: center;
		padding: 32rpx;
		justify-content: space-between;
	}

	.bottom_icon {
		height: 100%;
		width: 20%;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon_1 {
		color: var(--fui-color-danger);
	}

	.icon_2 {
		color: var(--fui-color-primary);
	}
</style>